<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
  <%--<meta charset="UTF-8">--%>
  <title>注册我的秘密花园!</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${pageContext.request.contextPath}/statics/css/login/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
  <link href="${pageContext.request.contextPath}/statics/css/login/templatemo_style.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/login/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/login/bootstrap.min.js"></script>
</head>
<body class="templatemo-bg-gray">
<input type="hidden" id="errorMessage" name="errorMessage" value='${errorMessageJson}'>
<div class="container">
  <div class="col-md-12">
    <h1 class="margin-bottom-15">欢 迎 注 册</h1>
    <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" action="${pageContext.request.contextPath}/registerRequest" method="post">

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">账号</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="account" class="control-label fa-label"><i class="fa fa-user"></i></label>
            <input class="form-control" maxlength="20" onkeyup="value=value.replace(/[^a-zA-Z0-9_]/g,'')" id="account" placeholder="8-20位的字母,数字或者下划线" name="account" required>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">密码</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="password" class="control-label fa-label"><i class="fa fa-lock"></i></label>
            <input type="password" maxlength="20" class="form-control" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" id="password" placeholder="8-20位的字母或者数字" name="password" required>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">确认</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="passwordEnsure" class="control-label fa-label"><i class="fa fa-lock"></i></label>
            <input type="password" maxlength="20" class="form-control" onkeyup="value=value.replace(/[^a-zA-Z0-9]/g,'')" pattern="[0-9A-Za-z]{8,21}" id="passwordEnsure" placeholder="请再次输入密码" name="passwordEnsure" required>
          </div>
        </div>
      </div>

      <div class="form-group" style="display:none;">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">头像</label>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="profilePhoto" class="control-label fa-label"><i class="fa fa-lock"></i></label>
            <input class="form-control" id="profilePhoto" placeholder="profilePhoto" name="profilePhoto" value="1">
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">姓名</label><span style="color:red">*</span>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="name" class="control-label fa-label"><i class="fa fa-vcard"></i></label>
            <input class="form-control" maxlength="20" onkeyup="value=value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g,'')" id="name" placeholder="8-20位的字母,数字或者下划线" name="name" required>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-2">
          <div class="control-wrapper">
            <label class="control-label fa-label">性别</label>
          </div>
        </div>
        <div class="col-md-10">
          <div class="control-wrapper">
            <label for="gender" class="control-label fa-label" ><i class="fa fa-intersex"></i></label>
            <label>I'm boy!</label><input type="radio" id="gender" name="gender" value="M" checked>&nbsp;&nbsp;&nbsp;
            <label>I'm girl!</label><input type="radio" name="gender" value="F">&nbsp;&nbsp;&nbsp;
            <label>You guess?</label><input type="radio" name="gender" value="0">
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-12">
          <div class="control-wrapper" style="margin: auto;text-align:center;">
            <input id="button_showOptional" type="button" value="显示非必填条目" onclick="showOptional();" class="btn btn-info col-md-12">
            <input id="button_hideOptional" type="button" value="隐藏非必填条目" onclick="hideOptional();" class="btn btn-info col-md-12" style="display: none;">
          </div>
        </div>
      </div>

      <div id="optional" style="display: none;">
        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">住址</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="homeAddress" class="control-label fa-label"><i class="fa fa-address-book"></i></label>
              <input class="form-control" maxlength="30" onkeyup="value=value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\s]/g,'')" id="homeAddress" placeholder="30位以内的字母,汉字,数字,空格或者下划线" name="homeAddress">
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">工作</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="job" class="control-label fa-label"><i class="fa fa-user-circle-o"></i></label>
              <select class="form-control" id="job" name="job">
                <option value="">请选择您的职业</option>
                <option value="学生">学生</option>
                <option value="JAVA开发">JAVA开发</option>
                <option value="个体商户">个体商户</option>
                <option value="蓝领">蓝领</option>
                <option value="其它">其它</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">爱好</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="hobbies" class="control-label fa-label"><i class="fa fa-gamepad"></i></label>
              <input class="form-control" maxlength="60" onkeyup="value=value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\s]/g,'')" id="hobbies" placeholder="60位以内的字母,中文,数字,空格或者下划线" name="hobbies">
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">邮箱</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="email" class="control-label fa-label"><i class="fa fa-envelope"></i></label>
              <input class="form-control" type="email" id="email" onkeyup="value=value.replace(/[^a-zA-Z0-9_@.\s]/g,'')" maxlength="30" placeholder="30位以内的字母数字下划线 , 格式: XXX@XX.XXX" name="email">
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">手机</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="mobile" class="control-label fa-label"><i class="fa fa-phone-square"></i></label>
              <input class="form-control" maxlength="18" onkeyup="value=value.replace(/[^\d]/g,'')" id="mobile" placeholder="18位以内的数字" name="mobile">
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-md-2">
            <div class="control-wrapper">
              <label class="control-label fa-label">权限</label>
            </div>
          </div>
          <div class="col-md-10">
            <div class="control-wrapper">
              <label for="permission" class="control-label fa-label"><i class="fa fa-user-times"></i></label>
              <select class="form-control" id="permission" name="permission">
                <option value="1">普通用户</option>
                <option value="2">VIP用户</option>
              </select>
            </div>
          </div>
        </div>
      </div>


      <div class="form-group">
        <div class="col-md-12">
          <div class="checkbox control-wrapper">
            <label>
              <input type="checkbox">记住我
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-12">
          <div class="control-wrapper">
            <input type="submit" value="注 册" class="btn btn-info">
            <a href="#" class="text-right pull-right">忘记密码?</a>
          </div>
        </div>
      </div>
      <hr>
      <div class="form-group" style="display:none;">
        <div class="col-md-12">
          <label>Login with: </label>
          <div class="inline-block">
            <a href="#"><i class="fa fa-facebook-square login-with"></i></a>
            <a href="#"><i class="fa fa-twitter-square login-with"></i></a>
            <a href="#"><i class="fa fa-google-plus-square login-with"></i></a>
            <a href="#"><i class="fa fa-tumblr-square login-with"></i></a>
            <a href="#"><i class="fa fa-github-square login-with"></i></a>
          </div>
        </div>
      </div>
    </form>
    <div class="text-center">
      <a href="${pageContext.request.contextPath}/loginPage" class="templatemo-create-new">我有账号,直接登录!<i class="fa fa-arrow-circle-o-right"></i></a>
    </div>
  </div>
</div>
</body>
<script>
  var optinal = $("#optional");
  var button_hideOptional = $("#button_hideOptional");
  var button_showOptional = $("#button_showOptional");
  $().ready(function(){
    var errorMessage = '${errorMessageJson}';
    if (errorMessage !== ''){
      //将JS对象转换为JSON格式的字符串
      //var newData = JSON.stringify(errorMessage);
      //将JSON格式的字符串解析为JS对象
      var newData = JSON.parse(errorMessage);
      if(newData !== null){
        for(var dataKey in newData){
          if(newData.hasOwnProperty(dataKey)){
            var errorMessageP =  "<p style='color:red;'>" + newData[dataKey] + "</p>";
            $("input[name='" + dataKey + "']").after(errorMessageP);
          }
        }
      }
    }
    optinal.css("display" , "none");
  });

  function showOptional(){
    optinal.slideDown(500);
    button_showOptional.css("display" , "none");
    button_hideOptional.css("display" , "");
  }

  function hideOptional(){
    optinal.slideUp(500);
    button_showOptional.css("display" , "");
    button_hideOptional.css("display" , "none");
  }
</script>
</html>
